<template>
	<view>
		<view class="tab-page">
			<view class="list2">
				<view class="sort" :style="{color:item.isShow?'blue':''}"  v-for="(item,index) in  options" :key="index" @click="isShowPage(item)"><view
						:class="['iconfont',item.isShow?'icon-app-xiangshang':'icon-app-xiangxia']"></view>
				</view>
			</view>
			<view class="sort-list" v-if="item.isShow">
				<view class="sort-item" :style="{color:selectItem.value==s.value?'blue':''}"
					v-for=" (s,index) in item.children" :key="index" @click="selectChang(s)">
					<view class="left-item">{{s.label}}</view>
					<view v-if="selectItem.value==s.value" class="iconfont icon-app-gou"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			options:Array,
			activeColor:{
				type:String,
				default:()=> "blue"
			}
			
		},
		data() {
			return {
				show:false,
				selectItem:{}
			}
		},
		methods: {
			isShowPage(isItem) {
				// this.show = !this.show
				isItem.isShow=!isItem.isShow
			},
			selectChang(isItem){
				var _this =this;
				_this.selectItem = isItem
				
				//选择适合需求的定时器
				_this.timer = setTimeout( () => {
				    // 这里添加您的逻辑		
				   _this.$emit('selectedData',_this.selectItem)
				}, 300)
			}
		}
	}
</script>

<style lang="scss">
	.tab-page {
		margin-top: 10rpx;

		.list2 {
			display: flex;
			justify-content: space-around;
			

			.sort {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #000000;
			}
		}

		.sort-list {
			width: 100%;
			border: 1px solid red;
			.sort-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 40rpx 10rpx 20rpx;
				font-size: 34rpx;
				border-bottom: 1px solid #f2f2f2;
				z-index: 99;
			}

			.sort-item:last-child {
				border-bottom: none;
			}

			.sort-item:first-child {
				border-top: 1px solid #f2f2f2;
				margin-top: 10rpx;
			}
		}

	}
</style>
